<template>
    <div class="link_box">
        <div class="link_title">
            <p>友情链接</p>
        </div>
        <div class="card_box">
            <div class="row">
                <div class="col-md-3" v-for="link in linkRow1" :key="link.id">
                    <div class="card">
                        <div class="card_head">
                            <el-avatar :style="RandomColor()">{{link.avatar}}</el-avatar>
                            <span class="title"><a href="https://www.baidu.com"><strong>{{link.name}}</strong></a> </span>
                        </div>
                        <p>{{link.content}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      linkRow1: [
        {
          id: 1,
          avatar: '杨',
          name: '杨青博客',
          content: '杨青青个人博客网站，是一个专注前端设计领域8年以上的女程序员的个人网站，也是一个提供原创个人博客模板，企业网站模板等优质资源下载的个人原创网站。'
        },
        {
          id: 2,
          avatar: '若',
          name: '若岚博客',
          content: '杨若岚个人博客,一个记录生活与分享资讯的个人博客网站；记录生活点滴,分享资讯,珍藏美丽回忆等资讯博客.'
        },
        {
          id: 3,
          avatar: '唐',
          name: '唐子涵的个人博客',
          content: '唐子涵的个人博客，是一个爱音乐，爱分享的男程序猿的个人博客网站，分享个人开发经验的技术博客'
        },
        {
          id: 4,
          avatar: '雨',
          name: '雨心博客',
          content: '关于互联网技术的一切，程序员聚集地，欢迎一起来秃头，更多的linux运维知识，数据库小技巧。'
        },
        {
          id: 5,
          avatar: '雨',
          name: '雨心博客',
          content: '关于互联网技术的一切，程序员聚集地，欢迎一起来秃头，更多的linux运维知识，数据库小技巧。'
        },
        {
          id: 6,
          avatar: '雨',
          name: '雨心博客',
          content: '关于互联网技术的一切，程序员聚集地，欢迎一起来秃头，更多的linux运维知识，数据库小技巧。'
        },
        {
          id: 7,
          avatar: '雨',
          name: '雨心博客',
          content: '关于互联网技术的一切，程序员聚集地，欢迎一起来秃头，更多的linux运维知识，数据库小技巧。'
        },
        {
          id: 8,
          avatar: '雨',
          name: '雨心博客',
          content: '关于互联网技术的一切，程序员聚集地，欢迎一起来秃头，更多的linux运维知识，数据库小技巧。'
        },
        {
          id: 9,
          avatar: '度',
          name: '百度一下',
          content: '百度一下，你就知道！'
        }
      ]
    }
  },
  // 随机颜色
  computed: {
    // RandomColor (index) {
    //   var r, g, b
    //   r = Math.floor(Math.random() * 256)
    //   g = Math.floor(Math.random() * 256)
    //   b = Math.floor(Math.random() * 256)
    //   return 'background:' + 'rgb(' + r + ',' + g + ',' + b + ')'
    // }
  },
  methods: {
    // 随机颜色
    RandomColor (index) {
      var r, g, b
      r = Math.floor(Math.random() * 256)
      g = Math.floor(Math.random() * 256)
      b = Math.floor(Math.random() * 256)
      return 'background:' + 'rgb(' + r + ',' + g + ',' + b + ')'
    }
  }
}
</script>

<style lang="less" scoped>
.link_box{
    .link_title{
        p{
            font-size: 1.5rem;
            text-align: center;
            line-height: 100px;
            color: #555;
            font-weight: 500;
        }
    }
    .card_box{
        .card{
            height: 10rem;
            min-width: 100px;
            // margin: 0.8rem 0.8rem 0.8rem 0px;
            padding: 7% 9%;
            margin-bottom: 8%;
            overflow: hidden;
            transition: all 0.5s;
            background: rgba(255, 255, 255, 0);
            .card_head{
                width: 100%;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #eee;

                .title{
                    font-size: 15px;
                    padding: 0 5%;
                    text-align: left;
                    // border: 1px solid red;
                    height: 25px;
                    width: 80%;
                }
            }
            p{
                margin-top: 3%;
                color: #303133;
                font-size: 0.8rem;
                overflow: hidden;
                display: -webkit-box;//将元素设为盒子伸缩模型显示
                -webkit-box-orient: vertical;//伸缩方向设为垂直方向
                -webkit-line-clamp: 3;//超出3行隐藏，并显示省略号
            }
        }
        .card:hover{
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
        }
    }
}
</style>
